<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .box {
            margin: 100px auto;
            width: 300px;
            height: 320px;
            border: black 1px solid;
            position: relative;
        }

        .boxtb {
            width: 300px;
            height: 20px;
            line-height: 20px;
        }

        .boxtb .btcur {
            background: deeppink;
        }

        button {
            width: 50px;
            height: 20px;
            line-height: 20px;
            margin-top: 0px;
        }

        .boxbottom {
            width: 300px;
            height: 300px;

        }

        .show1 {
            width: 300px;
            height: 300px;
            background: chartreuse;
            display: none;
        }

        .show2 {
            width: 300px;
            height: 300px;
            background: red;
            display: none;
        }

        .show3 {
            width: 300px;
            height: 300px;
            background: gold;
            display: none;
        }

        .show4 {
            width: 300px;
            height: 300px;
            background: teal;
            display: none;
        }

        .show5 {
            width: 300px;
            height: 300px;
            background: blueviolet;
            display: none;
        }

    </style>
    <script>
        window.onload = function () {
            var butts = document.getElementById("boxtb").getElementsByTagName("button");
            var divs = document.getElementById("boxbottom").getElementsByTagName("div");

            for (let i = 0; i < butts.length; i++) {
                butts[i].index = i;
                butts[i].onclick = function () {
                    for (let j = 0; j < butts.length; j++) {
                        butts[j].className = "";
                        divs[j].className = "";
                        divs[j].innerHTML = "";
                    }
                    // alert("show" + this.index);
                    this.className = "btcur";
                    // alert(this.index);
                    divs[this.index].className = "show" + this.index;
                    divs[this.index].innerHTML = "这是第" + (this.index + 1) + "个html";
                    divs[this.index].style.display = "block";
                };

            }
        }

    </script>

</head>
<body>
<div class="box">
    <div class="boxtb" id="boxtb">
        <button id="bt1" class="">1</button>
        <button id="bt2">2</button>
        <button id="bt3">3</button>
        <button id="bt4">4</button>
        <button id="bt5">5</button>
    </div>
    <div class="boxbottom" id="boxbottom">
        <div class=""></div>
        <div class=""></div>
        <div class=""></div>
        <div class=""></div>
        <div class=""></div>
    </div>
</div>

</body>
</html>